<template>
    <div>
      <template>
        <el-dialog title="添加菜单" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
            <el-form>
                <el-form-item label="菜单类型" >
                    <div class="radio">
                    <el-radio-group v-model="type">
                        <el-radio :label="0" disabled>目录</el-radio>
                        <el-radio :label="1" disabled>菜单</el-radio>
                        <el-radio :label="2" disabled>按钮</el-radio>
                    </el-radio-group>
                    </div>
                </el-form-item>
            </el-form>
            <el-form :model="menus" ref="edits" label-width="80px" v-show="type==0">
                <el-form-item hidden>
                    <el-input v-model="menus[0].id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录标题">
                    <el-input v-model="menus[0].title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录标识" >
                    <el-input v-model="menus[0].name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录路径">
                    <el-input v-model="menus[0].url" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="排序编号" >
                    <el-input-number v-model="menus[0].orderNum" controls-position="right" @change="handleChange" :min="0" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="目录图标" >
                    <el-input v-model="menus[0].icon" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menus" ref="edits" label-width="120px" v-show="type==1">
                <el-form-item hidden>
                    <el-input v-model="menus[0].id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单标题" >
                    <el-input v-model="menus[0].title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单标识" >
                    <el-input v-model="menus[0].name" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" >
                    <!-- <el-cascader :parents="parents" clearable></el-cascader> -->
                    <el-input v-model="menus[0].parentName" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="是否隐藏菜单" >
                    <el-switch
                    v-model="menus[0].hidden"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="菜单路由" >
                    <el-input v-model="menus[0].url" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="排序编号" >
                    <el-input-number v-model="menus[0].orderNum" controls-position="right" @change="handleChange" :min="0" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="菜单图标" >
                    <el-input v-model="menus[0].icon" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menus" ref="edits" label-width="80px" v-show="type==2">
                <el-form-item hidden>
                    <el-input v-model="menus[0].id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="按钮名称" >
                    <el-input v-model="menus[0].title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" >
                    <el-select v-model="menus[0].parentName" readonly style="width: 100%;"></el-select>
                </el-form-item>
                <el-form-item label="授权标识">
                    <el-input v-model="menus[0].perm" autocomplete="off" readonly></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateMenus">确 定</el-button>
            </div>
        </el-dialog>
      </template> 
    </div>
</template>

<script>
import http from '@/utils/request';

export default {
    name: 'ThreeEditMenus',

    data() {
        return {
            dialogTableVisible:false,
            type: '',
            menus: {},
            
        };
    },

    mounted() {
        
    },

    methods: {
      async updateMenus(){
        console.log(this.menus[0]);
        // const s = JSON.stringify(this.menus)
        // console.log(s);
        try {
                //const s = JSON.stringify(this.menus)
                await this.$refs.edits.validate()
                // 提交数据
                const r = await http.put('/menu/getMenus', this.menus[0])

                if(r.data.code > 0) {
                    // 给用户一个提示的消息
                    this.$message({
                        message: '数据修改成功',
                        type: 'success'
                    })
                    // 关闭模态框
                    this.dialogTableVisible = false
                    // 数据重新加载
                    this.$emit('refresh')
                }
            }catch(err) {
                console.log(err)
            }
        
      }  
    },
};
</script>

<style lang="scss" scoped>

</style>